<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Poll-tutorial</title>

    <style>
    table {
        font-family: arial, sans-serif;
        border-collapse: collapse;
        width: 300px;
    }

    td, th {
        border: 1px solid #dddddd;
        text-align: left;
        padding: 8px;
    }

    tr:nth-child(even) {
        background-color: #dddddd;
    }

  </style>
</head>
<body>
<H3><a href="create/">Create new</a></H3>

<div style="margin: 10px">
    <div style="float: left; margin: 10px;">
        {{#polls}}
        <form method="post" action="/vote">
            <input name="id" value="{{key}}" hidden>
            <table>
                <tr>
                    <th colspan="2" style="text-align: center">
                        <h3><a href="/poll/{{key}}">Title: {{value.title}}</a></h3>
                    </th>
                </tr>
                <tr>
                    <th colspan="2" style="text-align: center">Question: {{value.message}}</th>
                </tr>
                <tr>
                    <th>
                      <div style="text-align: center;">
                            <select name="option">
                                {{#value.options}}
                                <option value="{{key}}">{{key}}</option>
                                {{/value.options}}
                            </select>
                        </div>
                    </th>
                    <th style="text-align: center"></th>
                </tr>
                {{#value.options}}
                <tr>
                    <th style="text-align: center">Option: {{key}}</th>
                    <th style="text-align: center">Votes: {{value}}</th>
                </tr>
                {{/value.options}}
                <tr>
                    <th style="text-align: center"></th>
                    <th style="text-align: center">
                        <button>Vote</button>
                    </th>
                </tr>
            </table>
        </form>

        <form method="post" action="/delete">
            <input name="id" value="{{key}}" hidden>
            <button>Delete</button>
        </form>
        <br>
        {{/polls}}

        <div>
            {{^polls}}
            <h2>Empty list</h2>
            {{/polls}}
        </div>
    </div>

</div>
</body>
</html>
